<template>
	<div id="login">
		<!--中间的容器盒子-->
		<div class="login_box">
		  <!--顶部图片的div容器-->
		  <div class="img_box">
		    <img src="@/assets/num1.png" alt="" />
		  </div>
		
		  <!--登录表单-->
		  <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" 
		    class="loginForm_box">
		    <el-form-item prop="userAccount">
		      <el-input v-model="loginForm.userAccount" 
		      prefix-icon="iconfont icon-user"></el-input>
		    </el-form-item>
		    <el-form-item prop="userPassword">
		      <el-input type="password" v-model="loginForm.userPassword" prefix-icon="iconfont icon-3702mima"></el-input>
		    </el-form-item>
		    <el-form-item class="btns" >
		      <el-button type="primary" @click="login">登录</el-button>
		      <el-button type="info" @click="resetLoginForm('loginFormRef')">重置</el-button>
			   <el-button type="warning" @click="Forgotpassword">忘记密码</el-button>
			  <el-button type="success" @click="sign">注册</el-button>
		    </el-form-item>
		  </el-form>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				// 表单对应的数据对象
				loginForm: {
				    userAccount: '',
				    userPassword: ''
				},
				// 表单校验规则
				loginFormRules: {
				    userAccount: [
				        { required: true, message: '请输入登录账号', trigger: 'blur'},
				        { min: 5, max: 11, message: '请输入 5 到 11 个字符', trigger: 'blur'}
				    ],
				    userPassword: [
				        { required: true, message: '请输入登录密码', trigger: 'blur'},
				        { min: 6, max: 10, message: '请输入 6 到 10 个字符', trigger: 'blur'}
				    ],
				}
			}
		},
		created() {
			
		},
		methods:{
			
			
			// 重置按钮
			resetLoginForm() {
			    // 重置表单的所有项
			    this.$refs.loginFormRef.resetFields()
			},
			//忘记密码页面
			Forgotpassword(){
				this.$router.push('/forgotpassword')
			},
			//注册页面
			sign(){
				this.$router.push('/sign')
			},
			// 登录按钮
			login() {
				console.log(this.loginForm)
				
			    // 判断表单校验是否有效
			    this.$refs.loginFormRef.validate(async valid => {
			        if(!valid)
			            return this.$message.error('校验失败')
			
			        // 发登录请求
			        const {data : res}= await this.$http.post('/buy/customer/getCustomer', this.loginForm)
					console.log(2222,res)
			        if(res==null || res=="") {
						return this.$message.error('用户名或密码有误!')
					}
			           
			        
			        this.$message.success('登录成功')
			        // 保存 token 到 sessionStorage, 与localStorage区别
					
					console.log(JSON.stringify(res))
			        
			        sessionStorage.setItem('token', res.id)
			        
			//         // 导航到 Home 组件
		     this.$router.push('/homepage')
			
			
			    })
			}
		}
	}
</script>

<style scoped>
	#login {
	  background-color: #2b4b6b;
	  background-image: url(../assets/imgs/login/login.jpg);
	  background-repeat:  round;
	  height: 100%;
	}
	
	.login_box {
	  width: 450px;
	  height: 300px;
	  background-color: #fff;
	
	  /* 绝对居中 */
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	}
	
	.img_box {
	  border: 1px solid #eee;
	  border-radius: 50%;
	  width: 130px;
	  height: 130px;
	  padding: 10px;
	  box-shadow: 0 0 10px;
	  background-color: #fff;
	
	  position: absolute;
	  left: 50%;
	  transform: translate(-50%, -50%);
	
	  img {
	    border: 1px solid #eee;
	    border-radius: 50%;
	    width: 130px;
	    height: 130px;
	  }
	}
	
	.loginForm_box {
	    position: absolute;
	    bottom: 0px;
	    width: 100%;
	    padding: 0 20px;
	    /*宽度会包含边框*/
	    box-sizing: border-box;
	}
	
	.btns {
	    display: flex;
	    justify-content: end;
	}
	</style>